<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- 搜索表单 -->
            <el-form :model="where" label-width="77px" class="ele-form-search" @keyup.enter.native="reload"
                @submit.native.prevent>
                <el-row :gutter="15">
                    <el-col :lg="6" :md="12">
                        <el-form-item label="小程序账号:">
                            <el-input clearable v-model="where.username" placeholder="请输入小程序账号" />
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <el-form-item label="注册来源:">
                            <!-- 10 =自助注册 ， 20 = 平台注册 -->
                            <el-select clearable v-model="where.source" placeholder="请选择注册来源" class="ele-fluid">
                                <el-option label="自助注册" value="10" />
                                <el-option label="平台注册" value="20" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="6" :md="12">
                        <div class="ele-form-actions">
                            <el-button type="primary" icon="el-icon-search" class="ele-btn-icon" @click="reload">查询
                            </el-button>
                            <el-button @click="reset">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <!-- 数据表格 -->
            <ele-pro-table ref="table" :where="where" :datasource="url" :columns="columns" :selection.sync="selection"
                height="calc(100vh - 315px)">
                <!-- 表头工具栏 -->
                <template slot="toolbar">
                    <el-button @click="openEdit(null)" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small"
                        v-if="permission.includes('sys:applet:add')">发起授权
                    </el-button>
                    <el-button @click="removeBatch" type="danger" icon="el-icon-delete" class="ele-btn-icon" size="small"
                        v-if="permission.includes('sys:applet:dall')">删除
                    </el-button>
                </template>
                <template slot="app_name" slot-scope="{row}">
                    <el-popover size="mini" trigger="hover">
                        <p>AppID：{{ row.app_id }}</p>
                        <p>AppSecret：{{ row.app_secret }}</p>
                        <p>原始ID：{{ row.user_name }}</p>
                        <el-tag size="mini" slot="reference">小程序信息</el-tag>
                    </el-popover>
                </template>
                <!-- 头像 -->
                <template slot="head_img" slot-scope="{row}">
                    <el-avatar shape="square" :size="25" :src="row.head_img" />
                </template>
                <template slot="qrcode_url" slot-scope="{row}">
                    <el-image style="width: 100px; height: 100px" :src="row.qrcode_url" :preview-src-list=[row.qrcode_url]
                        fit="cover"></el-image>
                </template>
                <!-- 注册来源列 -->
                <template slot="source" slot-scope="{row}">
                    <el-tag :type="row.source | typeFilter" size="mini">
                        {{ row.source | sourceFilter }}
                    </el-tag>
                </template>
                <!-- 状态列 -->
                <template slot="status" slot-scope="{row}">
                    <el-tag :type="row.status | typeFilter" size="mini">
                        {{ row.status | StatusFilter }}
                    </el-tag>
                </template>
                <template slot="auth_status" slot-scope="{row}">
                    <el-tag :type="row.auth_status | typeFilter" size="mini">
                        {{ row.auth_status | authStatusFilter }}
                    </el-tag>
                </template>
                <!-- 操作列 -->
                <template slot="action" slot-scope="{row}">
                    <el-link type="primary" :underline="false" icon="el-icon-edit" @click="openEdit(row)"
                        v-if="permission.includes('sys:applet:edit')">修改
                    </el-link>
                    <el-popconfirm class="ele-action" title="确定要删除此小程序吗？" @confirm="remove(row)">
                        <el-link type="danger" slot="reference" :underline="false" icon="el-icon-delete"
                            v-if="permission.includes('sys:applet:delete')">删除
                        </el-link>
                    </el-popconfirm>
                </template>
            </ele-pro-table>
        </el-card>
        <!-- 编辑弹窗 -->
        <applet-edit :data="current" :visible.sync="showEdit" @done="reload" />
    </div>
</template>

<script>
import { mapGetters } from "vuex";
import AppletEdit from './applet-edit';

export default {
    name: 'Applet',
    components: { AppletEdit },
    computed: {
        ...mapGetters(["permission"]),
    },
    filters: {
        // 状态类型过滤
        //primary', 'success', 'warning', 'danger', 'info
        typeFilter(status) {
            const statusMap = {
                1: "success",
                2: "warning",
                3: "danger",
                4: "info",
                5: "info",
            };
            return statusMap[status];
        },
        // 注册来源
        sourceFilter(source) {
            const sourceMap = {
                1: "自助注册",
                2: "平台注册",
            };
            return sourceMap[source];
        },
        //状态：1 正常 2 停用
        StatusFilter(status) {
            const statusMap = {
                1: "已授权",
                2: "待授权",
                0: "取消授权"
            };
            return statusMap[status];
        },
        //小程序认证状态 1 已认证 2 待认证 3 认证中 4 已过期
        authStatusFilter(authStatus) {
            const authStatusMap = {
                1: "已认证",
                2: "待认证",
                3: "认证中",
                4: "已过期",
            };
            return authStatusMap[authStatus];
        },
    },
    data() {
        return {
            auth_url:'',
            // 表格数据接口
            url: '/applet/index',
            // 表格列配置
            columns: [
                {
                    columnKey: 'selection',
                    type: 'selection',
                    width: 45,
                    align: 'center',
                    fixed: "left"
                },
                {
                    prop: 'id',
                    label: 'ID',
                    width: 80,
                    align: 'center',

                    fixed: "left"
                },
                {
                    prop: 'app_name',
                    label: '小程序名称',
                    align: 'center',
                    minWidth: 110,
                    slot: 'app_name',
                },
                {
                    prop: 'head_img',
                    label: '小程序头像',
                    align: 'center',
                    slot: 'head_img',
                }, {
                    prop: 'qrcode_url',
                    label: '小程序码',
                    align: 'center',
                    slot: 'qrcode_url',
                },
                {
                    prop: 'source',
                    label: '注册来源',
                    align: 'center',
                    slot: 'source'
                },
                {
                    prop: 'principal_name',
                    label: '主体名称',
                    align: 'center',
                },
                {
                    prop: 'status',
                    label: '授权状态',
                    align: 'center',
                    width: 100,
                    resizable: false,
                    slot: 'status',
                },
                {
                    prop: 'auth_status',
                    label: '认证状态',
                    align: 'center',
                    width: 80,
                    resizable: false,
                    slot: 'auth_status',
                },
                {
                    prop: 'create_time',
                    label: '注册时间',
                    align: 'center',


                    formatter: (row, column, cellValue) => {
                        return this.$util.toDateString(cellValue);
                    }
                },
                {
                    columnKey: 'action',
                    label: '操作',
                    width: 130,
                    align: 'center',
                    resizable: false,
                    slot: 'action',
                    fixed: "right"
                }
            ],
            // 表格搜索条件
            where: {},
            // 表格选中数据
            selection: [],
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 是否显示导入弹窗
            showImport: false
        };
    },
    methods: {
        //获取小程序授权码
       getAppletAuthUrl() {
            this.$http.get('/applet/authUrl').then(res => {
                if (res.data.code === 0) {
                    this.auth_url = res.data.data.auth_url;
                    this.current={auth_url:this.auth_url}
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                this.$message.error(e.message);
            });
        },
        /* 刷新表格 */
        reload() {
            this.$refs.table.reload({ where: this.where });
        },
        /* 重置搜索 */
        reset() {
            this.where = {};
            this.reload();
        },
        /* 显示编辑 */
        openEdit(row) {
            this.current = row;
            this.getAppletAuthUrl()
            this.showEdit = true;
        },
        /* 删除 */
        remove(row) {
            const loading = this.$loading({ lock: true });
            this.$http.post('/applet/delete', { id: row.id }).then(res => {
                loading.close();
                if (res.data.code === 0) {
                    this.$message.success(res.data.msg);
                    this.reload();
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                loading.close();
                this.$message.error(e.message);
            });
        },
        /* 批量删除 */
        removeBatch() {
            if (!this.selection.length) {
                this.$message.error('请至少选择一条数据')
                return;
            }
            this.$confirm('确定要删除选中的小程序吗?', '提示', {
                type: 'warning'
            }).then(() => {
                const loading = this.$loading({ lock: true });
                this.$http.post('/applet/delete', { id: this.selection.map(d => d.id) }).then(res => {
                    loading.close();
                    if (res.data.code === 0) {
                        this.$message({ type: 'success', message: res.data.msg });
                        this.reload();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => {
            });
        },
        /* 更改状态 */
        editStatus(row) {
            const loading = this.$loading({ lock: true });
            let params = Object.assign({
                "id": row.id,
                "status": row.status
            })
            this.$http.post('/applet/status', params).then(res => {
                loading.close();
                if (res.data.code === 0) {
                    this.$message({ type: 'success', message: res.data.msg });
                } else {
                    row.status = !row.status ? 1 : 2;
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                loading.close();
                this.$message.error(e.message);
            });
        }
    }
}
</script>

<style scoped></style>
